﻿@extends('Layout/base')

@section('title', '注册，腕表商城！买手表，上腕表！')

{{--主内容样式--}}
@section('css')
<link rel="stylesheet" href="{{asset('common/home/css/index.css')}}" type="text/css" media="screen, projection" />
<style type="text/css">
<!--
.STYLE1 {font-size: 16px}
.STYLE3 {
	font-size: medium;
	color: #CC0000;
}
-->
</style>
@endsection

{{--主内容js--}}
@section('main-js')
<!-- <script type="text/javascript" src="{{asset('common/home/js/index.js')}}"></script> -->
<script type="text/javascript" src="{{asset('common/home/js/jquery.js')}}"></script>
<script type="text/javascript" src="{{asset('common/home/js/jquery-1.12.3.min.js')}}"></script>
<script src="{{asset('common/home/js/global.js')}}"></script>
@endsection


{{--主内容区--}}
@section('main')
<!--index banner start-->
<!--index banner end-->
<div style="width:1100px;height:500px; margin:0 auto;">
	<div style="width:1090px;height:450px; float:right;margin-top:30px;border:1px solid;">
		<div style="width:1090px;height:20px; float:right;margin-top:5px;"align="right";>
			<span class="STYLE3"><a href="#">帮助中心</a></span>
		</div>
		<div style="width:200px;height:40px; float:left;margin-top:10px;"align="right";>
			<span class="STYLE1">用&nbsp;&nbsp;户&nbsp;名:</span>
		</div>
		<div style="width:880px;height:40px; float:right;margin-top:10px;"align="left";>
			<input type="text" name="name" size="50" style="height:25px" placeholder="输入你的用户名"/>
			<span class="mb25" id="nameexist" style="color: red;display: block;line-height: 20px"></span>
		</div>
		<div style="width:200px;height:40px; float:left;margin-top:10px;"align="right";>
			<span class="STYLE1">设置密码:</span>
		</div>
		<div style="width:880px;height:40px; float:right;margin-top:10px;"align="left";>
			<input type="password" name="pass" size="50" style="height:25px" placeholder="建议至少使用两种字符组合"/>
			<span class="mb25" id="passexist" style="color: red;display: block;line-height: 20px"></span>
		</div>

		<div style="width:200px;height:40px; float:left;margin-top:10px;"align="right";>
			<span class="STYLE1">确认密码:</span>
		</div>
		<div style="width:880px;height:40px; float:right;margin-top:10px;"align="left";>
			<input type="password" name="repass" size="50" style="height:25px" placeholder="请再次输入密码"/>
			<span class="mb25" id="repassexist" style="color: red;display: block;line-height: 20px"></span>
		</div>

		<div style="width:200px;height:40px; float:left;margin-top:10px;"align="right";>
			<span class="STYLE1">电子邮箱:</span>
		</div>
		<div style="width:880px;height:40px; float:right;margin-top:10px;"align="left";>
			<input type="text" name="email" size="50" style="height:25px" placeholder="建议使用常用邮箱"/>
			<span class="mb25" id="emailexist" style="color: red;display: block;line-height: 20px"></span>
		</div>

		<div style="width:200px;height:40px; float:left;margin-top:10px;"align="right";>
			<span class="STYLE1">*手机号码:</span>
		</div>
		<div style="width:880px;height:40px; float:right;margin-top:10px;"align="left";>
			<input type="text" name="phone" size="50" style="height:25px" placeholder="建议使用常用手机"/>
			<span class="mb25" id="phoneexist" style="color: red;display: block;line-height: 20px"></span>
		</div>
		<div style="width:200px;height:40px; float:left;margin-top:10px;"align="right";>
			<span class="STYLE1">*手机验证:</span>
		</div>
		<div style="width:880px;height:40px; float:right;margin-top:10px;"align="left";>
			<input type="text" value="" size="15" style="height:25px" placeholder="请输入验证码"/>
			<a id="phonecode" style="border:1px solid #ccc;width: 50px;height: 10px;font-size: 16px">获取验证码</a>

			<!-- <a class="btn btn-danger btn-register">获取验证码</a> -->
		</div>

		<div style="width:200px;height:40px; float:left;margin-top:10px;"align="right";></div>
		<span class="mb25" id="exist" style="color: red;display: block;line-height: 20px"></span>
		<div style="width:880px;height:40px; float:right;margin-top:10px;"align="left";>
			<a href="javascript:;" id="submit"><img src="{{asset('common/home/images/zhuce.png')}}" /></a>
		</div>
	</div>
</div>
<!--热销 start-->
<div id="hot_display_position"></div>
</div>
<p align="center">&nbsp;</p>

<!--热销 end-->
<div id="rank_display_position"></div>
</div>
<!--销售排行榜 end-->
</div>

<div id="floatBox">
    <div id="return">
        <a href="javascript:void(0);" class="c__gotop" title="返回顶部" style="display:none;" rel="nofollow"></a>
    </div>
</div>


<script type="text/javascript">
	//判断用户名是否存在
	$('input[name="name"]').blur(function () {
		$('span#nameexist').html('');
		var uname = $('input[name="name"]').val();
		var upass = $('input[name="pass"]').val();
		var repass = $('input[name="repass"]').val();
		var uphone = $('input[name="phone"]').val();
		var uemail = $('input[name="email"]').val();
		var ret = /^[a-zA-Z][a-zA-Z0-9_-]{3,10}$/;
		if (!ret.test(uname)) {
			console.log(ret.test(uname));
			$('span#nameexist').html('用户名必须以字母开头，数字、下划线组合且字符4-10位！').css('color', 'red');
			return false;
		} 
		$.ajax({
	        type: 'post',
	        url: '{{url("/home/doregister")}}',
	        data: 'name='+uname+'&pass='+upass+'&repass='+repass+'&phone='+uphone+'&email='+uemail+'&_token={{csrf_token()}}',
	        success:function (data) {
	        	// var arr = JSON.parse(data);
				console.log(data);
				if (data.status==1) {
					$('span#nameexist').html(data.msg).css('color', 'red');
					return false;
				}
			},	
			dataType:'json'
		});	
	})

	//密码验证
	$('input[name="pass"]').blur(function () {
		$('span#passexist').html('');
		var upass = $('input[name="pass"]').val();
		var ret = /^\S{6,20}$/;
		var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-zA-Z]|[0-9]){6,20}$/;
		if (!ret.test(upass)) {
			// console.log(upass.length);
			$('span#passexist').html('密码长度必须6-20位！').css('color', 'red');
			return false;
		} else if (!reg.test(upass)) {
			$('span#passexist').html('密码强度较弱，建议使用两种任意类型组合！').css('color', 'red');
		}
	});

	//确认密码判断
	$('input[name="repass"]').blur(function () {
		$('span#repassexist').html('');	
		var upass = $('input[name="pass"]').val();
		var repass = $('input[name="repass"]').val();
		if (upass != repass) {
				$('span#repassexist').html('两次密码不一致！').css('color', 'red');
				return false;
		}
	})

	// 邮箱判断
	$('input[name="email"]').blur(function () {
		$('span#emailexist').html('');	
		var uemail = $('input[name="email"]').val();
		var ret = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
		if (!ret.test(uemail)) {
			$('span#emailexist').html('邮箱不合法！').css('color', 'red');
			return false;
		}
	})

	//判断用户手机号
	$('input[name="phone"]').blur(function () {
		$('span#phoneexist').html('');
		var uname = $('input[name="name"]').val();
		var upass = $('input[name="pass"]').val();
		var repass = $('input[name="repass"]').val();
		var uphone = $('input[name="phone"]').val();
		var uemail = $('input[name="email"]').val();
		var ret = /^1[34578]\d{9}$/;
	    if (!ret.test(uphone)) {
	        console.log(ret.test(uphone));
	        $('span#phoneexist').html('请正确输入手机号码！').css('color', 'red');
	        return false;
	    }
		$.ajax({
	        type: 'post',
	        url: '{{url("/home/doregister")}}',
	        data: 'name='+uname+'&pass='+upass+'&repass='+repass+'&phone='+uphone+'&email='+uemail+'&_token={{csrf_token()}}',
	        success:function (data) {
				console.log(data);
				if (data.status==2) {
					$('#phoneexist').html(data.msg).css('color','red');
					// return false;
				}
			},	
			dataType:'json'
		});	
	})

	//手机验证码
	$('a#phonecode').click(function () {
		 $('span#phoneexist').html('');
		 $('span#phoneexist').html('请两分钟内输入验证码！').css('color', 'green');
		var uphone = $('input[name="phone"]').val();
		$.ajax({
	        type: 'post',
	        url: '{{url("/home/phonecode")}}',
	        data: 'phone='+uphone+'&_token={{csrf_token()}}',
	        success:function (data) {
	        	console.log(data);
	        },
	        dataType:'json'
		});
	})


	//提交数据
	$('#submit').click(function () {
		var uname = $('input[name="name"]').val();
		var upass = $('input[name="pass"]').val();
		var repass = $('input[name="repass"]').val();
		var uphone = $('input[name="phone"]').val();
		var uemail = $('input[name="email"]').val();
		$('span#nameexist').html('');
		$('span#passexist').html('');
		$('span#repassexist').html('');	
		$('span#phoneexist').html('');
		$('span#emailexist').html('');
		$('span#exist').html('');
		if(!uname){
			$('span#nameexist').html('用户名不能为空！');
			return;
		}
		if(!upass){
			$('span#passexist').html('密码不能为空！');
			return false;
		}
		if(!repass){
			$('span#repassexist').html('确认密码不能为空！');
			return false;
		}
		
		if(!uemail){
			$('span#emailexist').html('邮箱不能为空！');
			return false;
		}
		if(!uphone){
			$('span#phoneexist').html('手机不能为空！');
			return false;
		}

		// console.log(repass);
		$.ajax({
		        type: 'post',
		        url: '{{url("/home/addregisterdata")}}',
		        data: 'name='+uname+'&pass='+upass+'&repass='+repass+'&phone='+uphone+'&email='+uemail+'&_token={{csrf_token()}}',
		        success:function (data) {
					console.log(data);
					if (data.status==1) {
						$('span#nameexist').html(data.msg).css('color', 'red');
						return false;
					}
					if (data.status==2) {
						$('#phoneexist').html(data.msg).css('color', 'red');
						return false;
					}
					if (data.status==4) {
						$('#phoneexist').html(data.msg).css('color', 'red');
						return false;
					}

					if (data.status==5) {
						$('#phoneexist').html(data.msg).css('color', 'red');
						return false;
					}
					if (data=='error'){
						$('span#exist').html('注册失败，请你重新检查输入信息！').css('color', 'red');
						return false;
					}
					if (data.status==3) {
						$('span#exist').html(data.msg);
						location.href = '{{url("/login")}}'; 
					}
				},	

				dataType:'json'
			});	
	
	})

	
</script>
@endsection

{{--尾部js--}}
@section('footer-js')
    <script type="text/javascript" src="{{asset('common/home/js/')}}"></script>
    <script type="text/javascript" src="{{asset('common/home/js/compare.js')}}"></script>
@endsection
